<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>养护管理</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../css/style.css" />
	<link rel="stylesheet" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
	<style>
		html,
		body {
			background-color: #F5F6F6;
		}

		ul {
			position: relative;
			width: 100%;
		}

		ul,
		ol {
			margin-top: 0;
			margin-bottom: 0px;
		}

		ul li {
			list-style: none;
		}

		ul li input {
			display: none;
		}

		ul li label {
			float: left;
			width: 25%;
			text-align: center;
			line-height: 34px;
			height: 33px;
			border-right: 0;
			box-sizing: border-box;
			cursor: pointer;
			transition: all .3s;
			background-color: #1abc9c;
			color: #fff;
		}

		ul li input:checked+label {
			color: #000;
			background-color: #F5F6F6;
		}

		ul li:last-child label {
			border-right: 1px solid #1abc9c;
		}

		ul li .content {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			left: 0;
			top: 31px;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			transition: all .3s;
		}

		ul li .content table {
			width: 100%
		}

		ul li .content td {
			border-bottom: 1px solid #DFE0E0;
			height: 60px;
		}

		ul li .content td:nth-child(1) {
			padding-left: 10px;
		}

		ul li .content td:nth-child(1) p:nth-child(2) {
			color: #555555
		}

		ul li:nth-child(1) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(2) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(3) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(4) .content {
			background-color: #F5F6F6;
		}

		ul li input:checked~.content {
			opacity: 1;
			visibility: visible;
		}

		.Add {
			height: 34px;
			width: 96%;
			background-color: #1ABC9C;
			color: white;
			text-align: center;
			font-size: 15px;
			margin-top: 20px;
			outline: none;
		}

		.fontcolr {
			color: #cccccc
		}

		.clickfont {
			color: #72EDD1
		}

		.aa {
			width: 53%;
			height: 30px;
			float: left;
			font-size: 15px;
			background-color: #FFFFFF;
		}

		.cc {
			width: 37%;
			height: 30px;
			float: left;
			font-size: 15px;
			background-color: #FFFFFF;
		}

		.ab {
			width: 100%;
			color: #797979;
			float: left;
			margin-top: 5px
		}

		.ab span {
			margin-left: 30px;
			font-size: 16px
		}
		[v-cloak] {
      display: none;
    }
	</style>
</head>

<body>
	<div id="man" >
		<ul>
			<li>
				<input id="tab1" type="radio" name="tab" checked>
				<label for="tab1" onclick="switchAdd(0)">绿地养护</label>
				<div class="content" id="qqq" v-cloak>
					<div v-for="(todo, index) in todos"
						style="background-color: rgb(240,239,244);margin-top: 10px;height: 110px">
						<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
							<img src="../image/treeac.png" style="width:20px;height: auto;margin-top: 5px;margin-left: 20px" />
						</div>
						<div class="aa">
							<span
								style="margin-top: 5px;margin-left:5px;font-size: 13px">{{todo.greedLand.greedLandAdministrator.name}}</span>
						</div>
						<div class="cc" style="text-align: right;" v-on:click="openlvdiyanghu(todo.id)">
							<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情
								></span>
						</div>
						<div class="ab"><span style="font-size: 13px">养护类型：{{todo.maintenType.name}}</span></div>
						<div class="ab">
							<span  style="font-size: 13px">养护队伍：{{todo.constructionTeam.t_name}}</span>

						</div>
						<div class="ab"><span  style="font-size: 13px">养护时间：{{todo.maintenanceDate.replace(/.[0-9]*$/,'')}}</span></div>
					</div>
				</div>
			</li>
			<li>
				<input id="tab2" type="radio" name="tab">
				<label for="tab2" onclick="switchAdd(1)">卫生清理</label>
				<div class="content" id="qqq1">
					<div v-for="(todo, index) in todos"
						style="background-color: rgb(240,239,244);margin-top: 10px;height: 120px">
						<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
							<img src="../image/treeac.png"
								style="width:20px;height: auto;margin-top: 5px;margin-left: 20px" />
						</div>
						<div class="aa">
							<span
								style="margin-top: 5px;margin-left:5px;font-size: 13px">{{todo.greedLand.greedLandAdministrator.name}}</span>
						</div>
						<div class="cc" style="text-align: right;" v-on:click="openweishengyanghu(todo.id)">
							<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情
								></span>
						</div>
						<div class="ab"><span style="font-size: 13px">养护类型：{{todo.maintenType.name}}</span></div>
						<div class="ab">
							<span style="font-size: 13px">养护队伍：{{todo.constructionTeam.t_name}}</span>

						</div>
						<div class="ab"><span style="font-size: 13px">养护时间：{{todo.maintenanceDate.replace(/.[0-9]*$/,'')}}</span></div>
					</div>


				</div>
			</li>
			<li>
				<input id="tab3" type="radio" name="tab" value="设施维护">
				<label for="tab3" onclick="switchAdd(2)">设施维护</label>
				<div class="content" id="qqq2">
					<div v-for="(todo, index) in todos"
						style="background-color: rgb(240,239,244);margin-top: 10px;height: 120px">
						<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
							<img src="../image/treeac.png"
								style="width:20px;height: auto;margin-top: 5px;margin-left: 20px" />
						</div>
						<div class="aa">
							<span
								style="margin-top: 5px;margin-left:5px;font-size: 13px">{{todo.greedLand.greedLandAdministrator.name}}</span>
						</div>
						<div class="cc" style="text-align: right;" v-on:click="opensheshiyanghu(todo.id)">
							<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情
								></span>
						</div>
						<div class="ab"><span style="font-size: 13px">养护类型：{{todo.maintenType.name}}</span></div>
						<div class="ab">
							<span style="font-size: 13px">养护队伍：{{todo.constructionTeam.t_name}}</span>

						</div>
						<div class="ab"><span style="font-size: 13px">养护时间：{{todo.maintenanceDate.replace(/.[0-9]*$/,'')}}</span></div>
					</div>

				</div>
			</li>
			<li>
				<input id="tab4" type="radio" name="tab" value="植保工作">
				<label for="tab4" onclick="switchAdd(3)">植保工作</label>
				<div class="content" id="qqq3">
					<div v-for="(todo, index) in todos"
						style="background-color: rgb(240,239,244);margin-top: 10px;height: 120px">
						<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
							<img src="../image/treeac.png"
								style="width:20px;height: auto;margin-top: 5px;margin-left: 20px" />
						</div>
						<div class="aa">
							<span
								style="margin-top: 5px;margin-left:5px;font-size: 13px">{{todo.greedLand.greedLandAdministrator.name}}</span>
						</div>
						<div class="cc" style="text-align: right;" v-on:click="openzhibaoyanghu(todo.id)">
							<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情
								></span>
						</div>
						<div class="ab"><span style="font-size: 13px">养护方法：{{todo.maintenType.name}}</span></div>
						<div class="ab">
							<span style="font-size: 13px">养护队伍：{{todo.constructionTeam.t_name}}</span>

						</div>
						<div class="ab"><span style="font-size: 13px">养护时间：{{todo.maintenanceDate.replace(/.[0-9]*$/,'')}}</span></div>
					</div>

				</div>
			</li>
		</ul>
	</div>

	<table id="gl" style="width:100%">
		<tr>
			<td style="width: 100%">
				<div id="container" style="height: 200px"></div>
			</td>
		</tr>
	</table>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/jquery.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="../script/pagination.js"></script>
<script>
	apiready = function () {
		api.setRefreshHeaderInfo({
			visible: true,
			bgColor: "rgba(0,0,0,0)",
			textColor: "#666",
			textDown: "下拉刷新",
			textUp: "释放刷新",
		},
			function (ret, err) {
				window.location.reload();
				api.refreshHeaderLoadDone();
			}
		);

		$("#gl").hide()
		//片区id
		var reg = $api.getStorage("userSession");
    var sids = reg.data.sysRole.sysRoleCode;
		var role = sids.role_number;
		var areaid  = null;
    if (role != "construction") {
			areaid = $api.getStorage('selectpor').id
		}else{
			areaid = reg.data.areaid;
		}
	
		//企业id
		var enterpriseid = $api.getStorage('userSession').data.enterprise.id;
		//项目id
		var proid = $api.getStorage('userSession').data.proId;
		var sids = $api.getStorage("userSession").data.sysRole.sysRoleCode.role_number;
		var teamid = "";
		if (sids == "construction") {
			teamid = $api.getStorage('userSession').data.team_id
		}

		if (sids == "enterprise") {
			$("#man").hide()
			$("#gl").show()
		}

		var jsfun = 'tabAdd(0);';
		api.execScript({
			script: jsfun
		});
		//绿地列表
		var app = new Vue({
			el: '#qqq',
			data: {
				todos: [],
				pageNo: 1,
				pagess: null
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/mainten/list.json",
					data: {
						areaid: areaid,
						proid: proid,
						type: 1,
						teamid: teamid
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						app.pagess = result.code;
						for (var i = 0; i < result.data.length; i++) {
							app.todos.push(result.data[i])
						}
					}
				});
			},
			methods: {
				msgListView: function (curPage) {
					$.ajax({
						type: "post",
						//async : false, //同步执行
						url: BaseServiceUrl + "mobile/mainten/list.json",
						data: {
							areaid: areaid,
							proid: proid,
							type: 1,
							teamid: teamid
							// curPage : curPage
						},
						dataType: "json", //返回数据形式为json
						success: function (result) {
							//app.pages=2;
							app.todos = [];
							for (var i = 0; i < result.data.length; i++) {
								app.todos.push(result.data[i])
							}
						}
					});
					this.pageNo = curPage;
				}
			}
		});
		//卫生列表
		var app1 = new Vue({
			el: '#qqq1',
			data: {
				todos: [],
				pageNo: 1,
				pagess: null
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/mainten/list.json",
					data: {
						areaid: areaid,
						proid: proid,
						type: 2,
						teamid: teamid

					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						app1.pagess = result.code;
						for (var i = 0; i < result.data.length; i++) {
							app1.todos.push(result.data[i])
						}
					}
				});
			},
			methods: {

				msgListView: function (curPage) {
					$.ajax({
						type: "post",
						//async : false, //同步执行
						url: BaseServiceUrl + "mobile/mainten/list.json",
						data: {
							areaid: areaid,
							proid: proid,
							type: 2,
							teamid: teamid
							// curPage : curPage
						},
						dataType: "json", //返回数据形式为json
						success: function (result) {
							app1.pagess = result.code;
							app1.todos = [];
							for (var i = 0; i < result.data.length; i++) {
								app1.todos.push(result.data[i])
							}
						}
					});
					this.pageNo = curPage;
					//location.reload();
				}
			}
		})
		//设施列表
		var app2 = new Vue({
			el: '#qqq2',
			data: {
				todos: [],
				pageNo: 1,
				pagess: 0
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/mainten/list.json",
					data: {
						areaid: areaid,
						proid: proid,
						type: 3,
						teamid: teamid
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						app2.pagess = result.code;
						for (var i = 0; i < result.data.length; i++) {
							app2.todos.push(result.data[i])
						}
					}
				});
			},
			methods: {

				msgListView: function (curPage) {
					$.ajax({
						type: "post",
						//async : false, //同步执行
						url: BaseServiceUrl + "mobile/mainten/list.json",
						data: {
							areaid: areaid,
							proid: proid,
							type: 3,
							teamid: teamid
							// curPage : curPage

						},
						dataType: "json", //返回数据形式为json
						success: function (result) {
							app2.pagess = result.code;
							app2.todos = [];
							for (var i = 0; i < result.data.length; i++) {
								app2.todos.push(result.data[i])
							}
						}
					});
					this.pageNo = curPage;
					//location.reload();
				}
			}
		})
		//植保列表
		var app3 = new Vue({
			el: '#qqq3',
			data: {
				todos: [],
				pageNo: 1,
				pagess: null
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/mainten/list.json",
					data: {
						areaid: areaid,
						proid: proid,
						type: 4,
						teamid: teamid
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						app3.pagess = result.code;
						for (var i = 0; i < result.data.length; i++) {
							app3.todos.push(result.data[i])
						}
					}
				});
			},
			methods: {
				msgListView: function (curPage) {
					$.ajax({
						type: "post",
						//async : false, //同步执行
						url: BaseServiceUrl + "mobile/mainten/list.json",
						data: {
							areaid: areaid,
							proid: proid,
							type: 4,
							teamid: teamid
							// curPage : curPage
						},
						dataType: "json", //返回数据形式为json
						success: function (result) {
							app3.pagess = result.code;
							app3.todos = [];
							for (var i = 0; i < result.data.length; i++) {
								app3.todos.push(result.data[i])
							}
						}
					});
					this.pageNo = curPage;
					//location.reload();
				}
			}
		});

		$.ajax({
			url: BaseServiceUrl + "mobile/mainten/qytop.json",
			type: "POST",
			data: {
				enterpriseid: enterpriseid
			},
			dataType: "json",
			success: function (ret) {
				var data = ret.data;
				testJson = eval("(" + data + ")");
				//全部队伍 饼图
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					color: ['#60acfc', '#5bc49f', '#ff7c7c', '#9287e7'],
					title: {
						text: '精细养护分类占比',
						subtext: '四大分类',
						left: 'center'
					},

					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: ['绿地养护', '卫生清理', '设施维护', '植保管理']
					},
					series: [{
						name: '养护',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: [{
							value: testJson.lv,
							name: '绿地养护'
						}, {
							value: testJson.ws,
							name: '卫生清理'
						}, {
							value: testJson.ss,
							name: '设施维护'
						}, {
							value: testJson.zb,
							name: '植保管理'
						},],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};

				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}

			},
			error: function (jqXHR, textStatus, errorThrown) { }
		});



	}
	//绿地养护详情
	function openlvdiyanghu(id) {
		var sids = $api.getStorage("userSession").data.sysRole.sysRoleCode.role_number;
		var teamid = "";
		var url = "./yanghu/lvdiyanghu_window.html";
		if (sids == "construction") {
			url = './yanghu/lvdiyanghuadd_window.html'
		}

		api.openWin({
			name: 'lvdiyanghu',
			url: url,
			rect: {
				x: 0,
				y: 75,
				w: 'auto',
				h: 'auto'
			},
			pageParam: {
				id: id
			}, //传递参数
			bounces: true,
			delay: 200
		});
	}

	//卫生养护详情
	function openweishengyanghu(id) {
		var sids = $api.getStorage("userSession").data.sysRole.sysRoleCode.role_number;
		var url = "./yanghu/weishengyanghu_window.html";
		if (sids == "construction") {
			url = './yanghu/weishengyanghuadd_window.html'
		}
		api.openWin({
			name: 'weishengyanghu',
			url: url,
			rect: {
				x: 0,
				y: 75,
				w: 'auto',
				h: 'auto'
			},
			pageParam: {
				id: id
			}, //传递参数
			bounces: true,
			delay: 200
		});
	}

	//设施养护详情
	function opensheshiyanghu(id) {
		var sids = $api.getStorage("userSession").data.sysRole.sysRoleCode.role_number;
		var url = "./yanghu/sheshiyanghu_window.html";
		if (sids == "construction") {
			url = './yanghu/sheshiyanghuadd_window.html'
		}
		api.openWin({
			name: 'sheshiyanghu',
			url: url,
			rect: {
				x: 0,
				y: 75,
				w: 'auto',
				h: 'auto'
			},
			pageParam: {
				id: id
			}, //传递参数
			bounces: true,
			delay: 200
		});
	}

	//植保养护详情
	function openzhibaoyanghu(id) {
		var sids = $api.getStorage("userSession").data.sysRole.sysRoleCode.role_number;
		var url = "./yanghu/zhibaoyanghu_window.html";
		if (sids == "construction") {
			url = './yanghu/zhibaoyanghuadd_window.html'
		}
		api.openWin({
			name: 'zhibaoyanghu',
			url: url,
			rect: {
				x: 0,
				y: 75,
				w: 'auto',
				h: 'auto'
			},
			pageParam: {
				id: id
			}, //传递参数
			bounces: true,
			delay: 200
		});
	}

	var switchAdd = function (s) {
		var jsfun = 'tabAdd(' + s + ');';
		api.execScript({
			script: jsfun
		});
	}
</script>
<script>
	//		apiready = function() {
	//			var jsfun = 'tabAdd(0);';
	//			api.execScript({
	//				script : jsfun
	//			});
	//		}
	//		var switchAdd = function(s) {
	//			var jsfun = 'tabAdd(' + s + ');';
	//			api.execScript({
	//				script : jsfun
	//			});
	//		}
</script>

</html>